<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加学生组织' : '修改学生组织' }}
				<a-icon @click="closeFunction" type="close-circle" />
			</p>
			<div class="main" id="new_message">
				<a-form-model ref="ruleForm" :model="form" :rules="rules">
					<a-form-model-item label="名称" prop="Name"><a-input v-model="form.Name" /></a-form-model-item>
					<a-form-model-item label="图标" prop="Ico">
						<a-upload
							accept="image/*"
							:action="requestUrl + '/Common/DoUploadFile?type=image'"
							list-type="picture-card"
							:file-list="fileList"
							@preview="handlePreview"
							@change="handleChange"
						>
							<div v-if="fileList.length < 1">
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div>
						</a-upload>
						<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
					</a-form-model-item>
					<a-form-model-item label="类型" prop="TypeID">
						<a-select v-model="form.TypeID" style="width:100%">
							<a-select-option v-for="(item, index) in TypeIDList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="所属部门" prop="DepartCode">
						<a-select v-model="form.DepartCode" showSearch optionFilterProp="children" style="width:100%" @change="DepartChange">
							<a-select-option v-for="(item, index) in DepartCodeList" :key="index" :value="item.Code">{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="学生组织负责人" prop="ChairmanNo">
						<a-select showSearch optionFilterProp="children" style="width: 100%" v-model="form.ChairmanNo" @search="fetchUser" :filterOption="filterOption">
							<a-spin v-if="fetching" slot="notFoundContent" size="small" />
							<a-select-option v-for="(item, index) in userList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="描述"><a-input v-model="form.Desc" type="textarea" :auto-size="global.textareaHeight" /></a-form-model-item>
					<a-form-model-item label="" class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>
	</div>
</template>

<script>
import { AddClub, UpdateClub, GetUserList } from '@/api/follow';
export default {
	props: {
		text: Object,
		DepartCodeList: Array,
		TypeIDList: Array
	},
	watch: {
		text: function(text) {
			if (JSON.stringify(text) == '{}') {
			} else {
				this.userList = [{ UserNo: text.ChairmanNo, Name: text.CairmanName }];
				this.form = text;
				if (text.Ico) {
					let obj = {
						uid: '-1',
						name: 'image.png',
						url: text.Ico
					};
					this.fileList.push(obj);
				} else {
					this.fileList = [];
				}
			}
		}
	},
	data() {
		return {
			loading: false,
			imageUrl: '',
			fileList: [],
			previewVisible: false,
			previewImage: '',
			userList: [],
			fetching: false,
			requestUrl: this.global.requestUrl,
			form: {
				Name: '',
				Ico: '',
				TypeID: '',
				ProjectID: '',
				DepartCode: '',
				ChairmanNo: '',
				Desc: ''
			},
			rules: {
				Name: [
					{
						required: true,
						message: '请输入学生组织名称',
						trigger: 'change'
					}
				],
				TypeID: [
					{
						required: true,
						message: '请选择学生组织类型',
						trigger: 'change'
					}
				],
				ProjectID: [
					{
						required: true,
						message: '请选择学生组织所属项目',
						trigger: 'change'
					}
				],
				DepartCode: [
					{
						required: true,
						message: '请选择所属部门',
						trigger: 'change'
					}
				],
				ChairmanNo: [
					{
						required: true,
						message: '请输入学院学生组织负责人',
						trigger: 'change'
					}
				]
			}
		};
	},
	methods: {
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		DepartChange(value) {},
		async fetchUser(value) {
			this.fetching = true;
			let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length > 1) {
				let data = {};
				data.key = value;
				data.top = 20;
				let res = await GetUserList(data);
				this.fetching = false;
				this.userList = res.data.data;
			}
		},
		closeFunction(data) {
			// this.$refs.ruleForm.resetFields()
			this.form = {};
			this.fileList = [];
			this.$emit('closeFun', data);
		},
		handleSubmit(e) {
			this.$refs.ruleForm.validate(async valid => {
				if (valid) {
					let data = this.form;
					let res = {};
					if (JSON.stringify(this.text) == '{}') {
						res = await AddClub(data);
					} else {
						res = await UpdateClub(data);
					}
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction('1');
					} else {
						this.$message.error(res.data.msg);
					}
				} else {
					return false;
				}
			});
		},
		handleCancel() {
			this.previewVisible = false;
		},
		async handlePreview(file) {
			if (this.text.Ico) {
				this.previewImage = this.text.Ico;
			} else {
				this.previewImage = this.requestUrl + file.response.url || this.text.Ico;
			}
			window.open(this.previewImage, '_blank')
		},
		handleChange({ fileList }) {
			if (fileList.length == 0) {
				this.form.Ico = '';
			}
			this.fileList = fileList;
			if (this.fileList[0] && this.fileList[0].status == 'done') {
				this.form.Ico = this.requestUrl + this.fileList[0].response.url;
			}
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
.ant-upload-list-picture-card-container {
	width: 80px;
	height: 80px;
}
/deep/.ant-form-item {
	margin: 6px 20px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 138px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
</style>
